<template>
  <view class="detail-base-info">
	  <view class="header-bar">
    <view class="status-bar" />
	  
    <wk-nav-bar
	  :command-list="commandList"
      title="询价明细"
      theme="white"
      class="nav-bar" />
	  </view>
	  <scroll-view :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
		  
    <section
      class="section about-operation">
      <view v-for="(item, index) in baseInfos" class="section-body">
        <uni-collapse ref="collapse" v-model="valueTotal[index]"  @change="change">
          <uni-collapse-item :title="'物料名称: '+ item.basicProductName">
            <view class="section-body">
				<template v-for="item1 in item.baseInfo">
              <base-info-item
                :key="item1.fieldId"
                :field="item1"
                :detail-data="detailData" />
				</template>
			<view v-for="(item2, index) in item.gysInfoList">
				<template v-for="finish in item2.finish" v-if="status == 2 || status == 3">
					<base-info-item
					  :key="finish.fieldId"
					  :field="finish"
					  :detail-data="detailData" />
				</template>
					<view class="section-title">
					    <text class="icon" />
					    <text class="text" style="color: #0045C4;">
					        {{item2.gysName + '报价内容'}}
					    </text>
					</view>
				    <!-- <uni-collapse-item :title="item2.gysName"> -->
					<view class="section-body">
						
							<!-- <base-info-item
							  fieldType="inputTable"
							  :key="1"
							  :field="item2.gysInfo"
							  :detail-data="detailData" /> -->
							  
						
						<template>
							<uni-forms ref="form" :model="formData" :rules="rules">
							    <uni-forms-item name="num" label-width="0">
									<view class="info-item-label">
									  {{ "报价数量" }}
									</view>
							      <uni-easyinput v-model="formData.num" type="number" placeholder="请输入报价数量" />
							    </uni-forms-item>
							    <uni-forms-item name="price" label-width="0">
									<view class="info-item-label">
									  {{ "含税单价" }}
									</view>
							      <uni-easyinput v-model="formData.price" type="number" placeholder="请输入含税单价" />
							    </uni-forms-item>
							    <uni-forms-item name="amount" label-width="0">
									<view class="info-item-label">
									  {{ "含税金额" }}
									</view>
							      <uni-easyinput v-model="formData.amount" type="number" placeholder="请输入含税金额" />
							    </uni-forms-item>
							    <uni-forms-item name="taxRate" label-width="0">
									<view class="info-item-label">
									  {{ "税率" }}
									</view>
							      <uni-easyinput v-model="formData.taxRate" type="number" placeholder="请输入税率" />
							    </uni-forms-item>
							    <uni-forms-item name="isFq" label-width="0">
									<view class="info-item-label">
									  {{ "是否放弃" }}
									</view>
							      <uni-switch v-model="formData.isFq" />
							    </uni-forms-item>
							    <uni-forms-item name="manufacture" label-width="0">
									<view class="info-item-label">
									  {{ "制造厂商" }}
									</view>
							      <uni-easyinput v-model="formData.manufacture" placeholder="请输入制造厂商" />
							    </uni-forms-item>
							    <uni-forms-item name="ghZq" label-width="0">
									<view class="info-item-label">
									  {{ "供货周期（天）" }}
									</view>
							      <uni-easyinput v-model="formData.ghZq" type="number" placeholder="请输入供货周期（天）" />
							    </uni-forms-item>
							    <uni-forms-item name="bjExplain" label-width="0">
									<view class="info-item-label">
									  {{ "付款方式" }}
									</view>
							      <uni-easyinput v-model="formData.bjExplain" placeholder="请输入付款方式" />
							    </uni-forms-item>
							  </uni-forms>
						</template>
						<template>
						<view class="section-title" @click="changeShowMore">
						<text class="title" style="color: #0045C4;">
						  更多
						</text>
						</view>
						<template v-for="ext in item2.ext" v-if="showMore">
							<base-info-item
							  :key="ext.fieldId"
							  :field="ext"
							  :detail-data="detailData" />
						</template>
						</template>
					</view>
				    <!--view> </uni-collapse-item> -->
				</view>
            </view>
          </uni-collapse-item>
          <view>
            
          </view>
        </uni-collapse>
      </view>
    </section>
  </scroll-view>
  </view>
  </section>
  </view>
</template>

<script>
  import BaseInfoItem from './baseInfoItem'
  import {getSrmXjOrderLcDetail} from 'API/inqueryMessage'
  import state from '@/mixins/state.js'

  export default {
    name: 'QuotaRoundDetail',
    components: {
      BaseInfoItem
    },
    mixins: [state],
    props: {
      detailId: {
        type: [String, Number],
        required: false
      },
      detailData: {
        type: Object,
        default: () => {}
      },
    },
    onLoad(e) {
      this.id = e.id
	  this.status = e.status
    },
    data() {
      return {
		  formData: {
			  id:undefined,
			  num: '',
			  price: '',
			  amount: '',
			  taxRate: '',
			  isFq: false,
			  manufacture: '',
			  ghZq: '',
			  bjExplain: '',
			  gysSrc:undefined,
			},
		  // 自定义表单校验规则
		rules: {
			// name: {
			// 	rules: [{
			// 		required: true,
			// 		errorMessage: '姓名不能为空'
			// 	}]
			// },
			// age: {
			// 	rules: [{
			// 		required: true,
			// 		errorMessage: '年龄不能为空'
			// 	}]
			// },
			// hobby: {
			// 	rules: [{
			// 			format: 'array'
			// 		},
			// 		{
			// 			validateFunction: function(rule, value, data, callback) {
			// 				if (value.length < 2) {
			// 					callback('请至少勾选两个兴趣爱好')
			// 				}
			// 				return true
			// 			}
			// 		}
			// 	]
			// }

		},
		commandList: [
		  //   {
				// label: '转移',
		  //       imgIcon: 'transfer',
		  //       noCheck: true,
		  //       value: 'transfer'
		  //   },
		    {
		        label: '提交',
		        imgIcon: 'update',
		        noCheck: true,
		        value: 'submit'
		    },
		    // {
		    //     label: '删除',
		    //     imgIcon: 'delete',
		    //     noCheck: true,
		    //     value: 'delete'
		    // }
		],
		showMore: false,
		status:0,
		pageHeight: 0,
		headerBarHeight: 0,
        id: undefined,
        valueTotal: [],
		valueMore: [],
        baseInfos: [
          
        ],
		commandValue:'',
        showBaseInfo: true
      }
    },
    wkActivated() {
      this.showBaseInfo = false
      this.$nextTick(function() {
        this.showBaseInfo = true
      })
    },
    mounted() {
		
      this.getFieldList()
	  // 设置message list页面高度
	        this.$nextTick(() => {
	          let infos = uni
	            .createSelectorQuery()
	            .in(this)
	            .select('.header-bar');
	          infos
	            .boundingClientRect(data => {
	              this.headerBarHeight = data.height;
	              let sysInfo = uni.getSystemInfoSync();
	              // padding20px
	              this.pageHeight = sysInfo.windowHeight - data.height - 20;
	            })
	            .exec();
	        });
	        // 监听窗口大小的变化
	        uni.onWindowResize((res) => {
	          console.log('ressss', res)
	          this.pageHeight = res.size.windowHeight;
	        });
    },
    methods: {
		handleCommand(command) {
		    this.commandValue = command.value
		    switch (command.value) {
		    case 'submit':
		        this.handleToChangeOwnerUser()
		        break
		    }
		},
		changeShowMore(){
			this.showMore = !this.showMore
		},
      onClick(e) {
        uni.showToast({
          title: '列表被点击'
        })
      },
      change(e) {
        console.log(e);
      },
      /**
       * 获取自定义字段信息
       */
      getFieldList() {
        getSrmXjOrderLcDetail({
          id: this.id
        }).then(res => {
          console.log("roundDetailRes",res)
		  if(res.data != undefined && res.data instanceof Array){
			  res.data.forEach((item, index) => {
				  let info = {
					  basicProductName : item.basicProductName,
					  baseInfo:[
						  { name: '物料编码', value: item.basicProductCode, formType: 'info' },
						  // { name: '物料名称', value: item.basicProductName, formType: 'info' },
						  { name: '规格', value: item.basicProductSspace, formType: 'info' },
						  { name: '型号', value: item.basicProductModel, formType: 'info' },
						  { name: '图号', value: item.paramPz, formType: 'info' },
						  { name: '计量单位', value: item.unit, formType: 'info' },
						  { name: '询价数量', value: item.num, formType: 'info' },
						  { name: '需求日期', value: item.xqDate, formType: 'info' },
						  { name: '行备注', value: item.bcExplain, formType: 'info' },
						  { name: '附件', value: item.src, formType: 'file' },
						],
						gysInfoList:[]
				  }
				  if(item.gysInfoList != undefined && item.gysInfoList instanceof Array){
					  item.gysInfoList.forEach((e, index) => {
						  let gysInfo = {
							  gysName: e.gysBasicInfo.name,
							finish:[
								{ name: '是否中标', value: e.srmXjOrderDetailUser.status, formType: 'info' },
								{ name: '中标数量', value: e.srmXjOrderDetailUser.zbsl, formType: 'info' },
								{ name: '中标价格', value: e.srmXjOrderDetailUser.zbjg, formType: 'info' },
							]
						  }
						  info.gysInfoList.push(gysInfo)
					  })
				  }
				  
				  this.formData.num = e.srmXjOrderDetailUser.num
				  this.formData.price = e.srmXjOrderDetailUser.price
				  this.formData.amount = e.srmXjOrderDetailUser.amount
				  this.formData.taxRate = e.srmXjOrderDetailUser.taxRate
				  this.formData.isFq = e.srmXjOrderDetailUser.isFq
				  this.formData.manufacture = e.srmXjOrderDetailUser.manufacture
				  this.formData.ghZq = value: e.srmXjOrderDetailUser.ghZq
				  this.formData.bjExplain = e.srmXjOrderDetailUser.bjExplain
				  this.formData.gysSrc = e.gysSrc
				  this.formData.bjwlmc = e.srmXjOrderDetailUser.bjwlmc
				  this.formData.bjgg = e.srmXjOrderDetailUser.bjgg
				  this.formData.bjxh = e.srmXjOrderDetailUser.bjxh
				  this.formData.bjth = e.srmXjOrderDetailUser.bjth
				  this.formData.minCgl = e.srmXjOrderDetailUser.minCgl
				  this.formData.remark = e.srmXjOrderDetailUser.remark
				  
				  this.baseInfos.push(info)
				  this.valueTotal.push([])
				  this.valueMore.push(['0'])
			  })
		  }
		  console.log("this.baseInfos",this.baseInfos)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
@import '../../style/style.scss';
.info-item-label {
    font-size: 26rpx;
    color: $light;
    padding: 15rpx 0;
  }
  .info-item-value {
    width: 100%;
    min-height: 50rpx;
    font-size: 30rpx;
    color: $dark;
	}
	
  .about-operation {
	  margin: 0px 10px 10px 10px;
    background-color: white;

    .section-body {
      padding: 0 30rpx;
      .list {
        margin-top: 36rpx;
        .list-item {
          display: flex;
          .time {
            flex-direction: column;
            @include left;
            .date {
              font-size: 26rpx;
              color: $dark;
            }
            .now {
              font-size: 24rpx;
              color: $gray;
            }
          }

          .icon-box{
            position: relative;
            display: flex;
            .icon {
              z-index: 2;
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              border: 5rpx solid #d5d5d5;
              margin: 14rpx 24rpx 0;
            }
            &::before {
              position: absolute;
              z-index: 1;
              top: 30rpx;
              left: 50%;
              transform: translateX(-50%);
              content: '';
              width: 1rpx;
              height: calc(100% - 16rpx);
              border-left: 1rpx dotted #d8d8d8;
              display: block;
            }
          }

          .content {
            flex: 1;
            padding-bottom: 36rpx;
						overflow: hidden;
            .user-info {
              font-size: 30rpx;
              @include left;
							.avatar {
								width: 70rpx;
								height: 70rpx;
							}
              .username {
                flex: 1;
                margin-left: 15rpx;
              }
              .time {
                font-size: 26rpx;
                color: #999;
              }
            }
            .option {
              font-size: 26rpx;
              color: $gray;
              display: flex;
              flex-wrap: wrap;
              padding-left: 80rpx;
              .option-title {}
              .option-text {
                flex: 1;
								word-break: break-all;
								overflow: hidden;
              }
            }
          }

          &:last-child {
            .icon-box {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
</style>
